import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:text_gradiate/text_gradiate.dart';
import 'package:vape_xe/routes/app_pages.dart';
import 'package:vape_xe/services/services.dart';
import 'package:vape_xe/utils/utils.dart';
import 'package:vape_xe/values/values.dart';
import 'package:vape_xe/widgets/widgets.dart';

import 'logic.dart';

class EarnView extends GetView<EarnController> {
  const EarnView({super.key});

  /// 底部下级收益列表
  Widget _inviteItem(int index) {
    return Container(
      width: 300.w,
      height: 64.h,
      decoration: BoxDecoration(
        borderRadius: 12.radius,
        color: Colors.white10,
      ),
      margin: EdgeInsets.only(bottom: 12.h),
      child: Row(
        children: [
          16.vGap,
          netImageCached(
            controller.rewardsList[index]['avatar'],
            width: 42.w,
            height: 42.w,
            radius: 100.w,
            fit: BoxFit.cover,
          ),
          12.vGap,
          Text(
            controller.rewardsList[index]['nickName'],
            style: TextStyle(
              fontSize: 12.sp,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.bold,
            ),
          ),
          const Spacer(),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 3.h),
                child: Text(
                  '+${ConfigStore.to.currency}',
                  style: TextStyle(
                    fontSize: 11.sp,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Text(
                controller.rewardsList[index]['money'].toString(),
                style: TextStyle(
                  fontSize: 16.sp,
                  fontFamily: 'Montserrat',
                  fontWeight: FontWeight.bold,
                ),
              )
            ],
          ),
          16.vGap
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SmartRefresher(
        enablePullUp: true,
        physics: const BouncingScrollPhysics(),
        controller: controller.refreshController,
        onRefresh: controller.onRefresh,
        onLoading: controller.onLoading,
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            SliverList(
              delegate: SliverChildListDelegate([
                Padding(
                  padding: EdgeInsets.fromLTRB(20.w, 20.h, 20.w, 6.h),
                  child: Row(children: [
                    Text('XE Relax & Earn'.tr,
                        style: TextStyle(
                          fontSize: 28.sp,
                          fontWeight: FontWeight.bold,
                        )),
                    const Spacer(),
                    IconButton(
                      onPressed: () {
                        Get.toNamed(Routes.PROFILE);
                      },
                      icon: Image.asset(
                        'assets/images/ic_wode.webp',
                        width: 22.w,
                        height: 22.w,
                      ),
                    )
                  ]),
                ),
                Padding(
                    padding: EdgeInsets.only(left: 20.w),
                    child: Text(
                      'Get Cash Back Every Time You Puff!'.tr,
                      style: TextStyle(color: AppColors.secondaryText, fontSize: 12.sp),
                    )),
                Padding(
                    padding: EdgeInsets.only(left: 20.w, top: 24.h),
                    child: Text(
                      'Balance'.tr,
                      style: TextStyle(color: AppColors.thirdText, fontSize: 12.sp),
                    )),
                Padding(
                  padding: EdgeInsets.only(left: 20.w),
                  child: Obx(
                    () => Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        TweenAnimationBuilder<double>(
                          tween: Tween<double>(begin: 0, end: controller.balance.value),
                          curve: Curves.ease,
                          duration: const Duration(milliseconds: 1200),
                          builder: (context, value, child) {
                            return TextGradiate(
                              text: RichText(
                                text: TextSpan(
                                  children: <TextSpan>[
                                    TextSpan(
                                      text: value.getIntegerString(),
                                      style: TextStyle(
                                        fontSize: 48.sp,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    TextSpan(
                                      text: '.${value.getDecimalString()}',
                                      style: TextStyle(
                                        fontSize: 16.sp,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              colors: const [Color(0xffF5B946), Color(0xffF58546)],
                              gradientType: GradientType.linear,
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              tileMode: TileMode.clamp,
                            );
                          },
                        ),
                        8.vGap,
                        Padding(
                          padding: EdgeInsets.only(bottom: 8.h),
                          child: Row(children: [
                            Text(ConfigStore.to.currency,
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  fontFamily: 'Montserrat',
                                )),
                            4.vGap,
                            Image.asset('assets/images/ic_shouqi.webp')
                          ]),
                        )
                      ],
                    ),
                  ),
                ),
                Padding(
                    padding: EdgeInsets.only(left: 20.w, top: 16.h),
                    child: Text(
                      'Total earnings'.tr,
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: AppColors.thirdText,
                      ),
                    )),
                Padding(
                  padding: EdgeInsets.only(left: 20.w),
                  child: Obx(
                    () => Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        TweenAnimationBuilder<double>(
                          tween: Tween<double>(begin: 0, end: controller.totalEarnings.value),
                          curve: Curves.ease,
                          duration: const Duration(milliseconds: 1200),
                          builder: (context, value, child) {
                            return TextGradiate(
                              text: RichText(
                                text: TextSpan(
                                  children: <TextSpan>[
                                    TextSpan(
                                      text: value.getIntegerString(),
                                      style: TextStyle(
                                        fontSize: 24.sp,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    TextSpan(
                                      text: '.${value.getDecimalString()}',
                                      style: TextStyle(
                                        fontSize: 16.sp,
                                        fontFamily: 'Montserrat',
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              colors: const [Color(0xffF5B946), Color(0xffF58546)],
                              gradientType: GradientType.linear,
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              tileMode: TileMode.clamp,
                            );
                          },
                        ),
                        10.vGap,
                        Padding(
                          padding: EdgeInsets.only(bottom: 1.h),
                          child: Row(children: [
                            Text(
                              '+${(controller.earnData['moneyToday'] ?? '0')}',
                              style: TextStyle(
                                fontSize: 14.sp,
                                fontFamily: 'Montserrat',
                                color: const Color(0xffF58546),
                              ),
                            ),
                            5.vGap,
                            Text(
                              'Today'.tr,
                              style: TextStyle(
                                fontSize: 14.5.sp,
                                fontFamily: 'Montserrat',
                              ),
                            )
                          ]),
                        ),
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 20.w, top: 26.h, right: 20.w),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Expanded(
                        child: GestureDetector(
                          onTap: () => Get.toNamed(Routes.WITHDRAW),
                          child: Container(
                            height: 48.h,
                            padding: EdgeInsets.all(1.w),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              borderRadius: 12.radius,
                              gradient: const LinearGradient(colors: [Color(0xffF5B946), Color(0xffF58546)]),
                            ),
                            child: Container(
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                borderRadius: 12.radius,
                                color: Colors.black,
                              ),
                              child: Text(
                                'Withdraw'.tr,
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  fontFamily: 'Montserrat',
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                      12.vGap,
                      Expanded(
                        child: GestureDetector(
                          onTap: () => Get.toNamed(Routes.REWARDS),
                          child: Container(
                            height: 48.h,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              borderRadius: 12.radius,
                              gradient: const LinearGradient(colors: [Color(0xffF5B946), Color(0xffF58546)]),
                            ),
                            child: Text(
                              'Rewards'.tr,
                              style: TextStyle(
                                fontSize: 14.sp,
                                fontFamily: 'Montserrat',
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                36.hGap,
                Stack(
                  children: [
                    Image.asset(
                      'assets/images/bg_earn.webp',
                      height: 160.h,
                      width: double.infinity,
                      alignment: Alignment.topCenter,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      top: 36.h,
                      left: 32.w,
                      child: Obx(
                        () => GestureDetector(
                          onTap: () => controller.toggleTodayOrTotal(1),
                          child: Container(
                            height: 40.h,
                            width: 68.w,
                            alignment: Alignment.center,
                            decoration: controller.todayOrTotal.value == 1
                                ? BoxDecoration(
                                    borderRadius: 122.radius,
                                    gradient: const LinearGradient(colors: [Color(0xffF5B946), Color(0xffF58546)]),
                                    boxShadow: [
                                      BoxShadow(
                                        color: const Color(0xffF5B946).withOpacity(0.5),
                                        blurRadius: 4.w,
                                        offset: Offset(0, 2.w),
                                      ),
                                    ],
                                  )
                                : BoxDecoration(
                                    borderRadius: 122.radius,
                                    color: Colors.white10,
                                  ),
                            child: Text(
                              'Today'.tr,
                              style: TextStyle(
                                fontSize: 14.sp,
                                fontFamily: 'Montserrat',
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 36.h,
                      left: 0,
                      right: 0,
                      child: Container(
                        height: 40.h,
                        width: 100.w,
                        alignment: Alignment.center,
                        child: Text(
                          'My Earnings'.tr,
                          style: TextStyle(
                            fontSize: 14.sp,
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                        top: 36.h,
                        right: 32.w,
                        child: Obx(
                          () => GestureDetector(
                            onTap: () => controller.toggleTodayOrTotal(2),
                            child: Container(
                              height: 40.h,
                              width: 68.w,
                              alignment: Alignment.center,
                              decoration: controller.todayOrTotal.value == 2
                                  ? BoxDecoration(
                                      borderRadius: 122.radius,
                                      gradient: const LinearGradient(colors: [Color(0xffF5B946), Color(0xffF58546)]),
                                      boxShadow: [Shadows.primaryIndicatorShadow],
                                    )
                                  : BoxDecoration(
                                      borderRadius: 122.radius,
                                      color: Colors.white10,
                                    ),
                              child: Text(
                                'Total'.tr,
                                style: TextStyle(
                                  fontSize: 14.sp,
                                  fontFamily: 'Montserrat',
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                        )),
                    Positioned(
                        bottom: 12.h,
                        left: 16.w,
                        right: 16.w,
                        child: Container(
                          height: 48.h,
                          padding: EdgeInsets.symmetric(horizontal: 16.w),
                          decoration: BoxDecoration(
                            borderRadius: 12.radius,
                            color: Colors.white10,
                          ),
                          child: Row(
                            children: [
                              Text(
                                '${"Invitation code".tr}：',
                                style: const TextStyle(fontWeight: FontWeight.bold),
                              ),
                              GestureDetector(
                                onTap: () => UserStore.to.profile.inviteCode?.copy(),
                                child: Row(children: [
                                  Text(
                                    UserStore.to.profile.inviteCode ?? '',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      foreground: Paint()
                                        ..shader = const LinearGradient(
                                          colors: <Color>[Color(0xffF5B946), Color(0xffF58546)],
                                        ).createShader(
                                          const Rect.fromLTWH(0.0, 0.0, 150.0, 0.0),
                                        ),
                                    ),
                                  ),
                                  8.vGap,
                                  Image.asset(
                                    'assets/images/ic_wenhao.webp',
                                    height: 14.w,
                                    width: 14.w,
                                  ),
                                ]),
                              ),
                              const Spacer(),
                              InkWell(
                                onTap: () => Get.bottomSheet(const ShareDialogView()),
                                child: Image.asset(
                                  'assets/images/ic_share.webp',
                                  height: 28.w,
                                  width: 28.w,
                                ),
                              )
                            ],
                          ),
                        ))
                  ],
                )
              ]),
            ),
            Obx(
              () => SliverToBoxAdapter(
                child: controller.rewardsList.isEmpty
                    ? Container(
                        height: 300.h,
                        color: Colors.white10,
                        child: Center(
                          child: Text(
                            'No Invitation to Benefit'.tr,
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 16.sp,
                            ),
                          ),
                        ),
                      )
                    : Container(
                        color: Colors.white10,
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        child: ListView.builder(
                          itemCount: controller.rewardsList.length,
                          shrinkWrap: true, // 防止 ListView 自身滚动
                          physics: const NeverScrollableScrollPhysics(), // 禁止 ListView 自身滚动
                          itemBuilder: (context, index) => _inviteItem(index),
                        ),
                      ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
